Google Charts API ব্যবহার করে আপনি আপনার চার্টে Interactivity (ইন্টারঅ্যাকটিভিটি) এবং Events (ইভেন্টস) যোগ করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত এবং সক্রিয় করে তোলে। ইন্টারঅ্যাকটিভিটি এবং ইভেন্টগুলি ব্যবহারকারীদের চার্টের উপরে হোভার বা ক্লিক করার মাধ্যমে বিভিন্ন ধরনের অ্যাকশন ট্রিগার করতে সাহায্য করে। এটি ডেটা ভিজুয়ালাইজেশনকে আরও শক্তিশালী এবং তথ্যপূর্ণ করে তোলে।
Google Charts ইন্টারঅ্যাকটিভিটি সমর্থন করে, অর্থাৎ ব্যবহারকারী যখন চার্টের কোন অংশের উপর হোভার বা ক্লিক করে, তখন তা একটি প্রতিক্রিয়া তৈরি করে। এই ইন্টারঅ্যাকটিভিটি সাধারণত টুলটিপ (Tooltips), ইভেন্ট হ্যান্ডলিং (Event Handling) এবং সিলেকশন (Selection) এর মাধ্যমে করা হয়।
Events Google Charts-এ ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, click, hover, select ইত্যাদি ইভেন্ট ব্যবহারকারীর কার্যকলাপ অনুযায়ী ট্রিগার হয়। এই ইভেন্টগুলি ডেটা দেখানোর বা অন্য কোনও কার্যকলাপ সম্পাদন করার জন্য ব্যবহৃত হয়।
চার্টে ক্লিক করার ইভেন্টটি ব্যবহারকারী ক্লিক করার পর click ইভেন্ট ট্রিগার করে। এই ইভেন্টটি ব্যবহার করে আপনি ক্লিক করা ডেটার বিস্তারিত দেখাতে পারেন।
Example: Click Event in Pie Chart
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Chart with Click Event';
chartType = 'PieChart';
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4,
width: 600,
height: 400
};
// Click Event Handler
handleChartClick(event) {
let selection = event.selection;
if (selection.length > 0) {
let selectedItem = selection[0];
let selectedTask = this.chartData[selectedItem.row + 1][0]; // Get the task name
alert('You clicked on: ' + selectedTask);
}
}
}
<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions"
(select)="handleChartClick($event)">
</google-chart>
এখানে, handleChartClick ফাংশনটি ব্যবহারকারীর ক্লিক করার পর চার্টের উপর নির্বাচন করা আইটেমের তথ্য দেখাবে।
Hover ইভেন্টটি ব্যবহারকারীর মাউস চার্টের উপর নিয়ে আসার (হোভার) সময় একটি প্রতিক্রিয়া তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত tooltip প্রদর্শন বা ডেটার কোনো বৈশিষ্ট্য প্রদর্শনের জন্য ব্যবহার করা হয়।
chartOptions = {
tooltip: {
trigger: 'selection', // Tooltip appears when the user hovers over a slice
isHtml: true
}
};
এখানে, tooltip সক্রিয় থাকবে যখন ইউজার চার্টের কোন অংশের উপর হোভার করবে।
Selection ইভেন্টটি ব্যবহারকারী যখন চার্টের কোনও অংশ নির্বাচন করেন (যেমন বার, পাই স্লাইস বা ডেটা পয়েন্ট), তখন এটি ট্রিগার হয়। এই ইভেন্টটি ব্যবহারকারীর নির্বাচিত অংশের উপর তথ্য প্রদর্শন করতে ব্যবহৃত হয়।
Example: Selection Event
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Chart with Selection Event';
chartType = 'PieChart';
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4,
width: 600,
height: 400
};
// Selection Event Handler
handleChartSelection(event) {
let selection = event.selection;
if (selection.length > 0) {
let selectedItem = selection[0];
let selectedTask = this.chartData[selectedItem.row + 1][0]; // Get the task name
alert('You selected: ' + selectedTask);
}
}
}
<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions"
(select)="handleChartSelection($event)">
</google-chart>
এখানে, handleChartSelection ফাংশনটি ব্যবহারকারী যখন চার্টের কোনও অংশ নির্বাচন করবেন তখন সেই অংশের নাম প্রদর্শন করবে।
Google Charts-এ ইভেন্ট হ্যান্ডলিং Angular অ্যাপে খুবই সহজ। আপনি select ইভেন্ট এবং অন্যান্য ইভেন্টগুলির মাধ্যমে ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী কাজ করতে পারেন।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Interactive Google Chart';
chartType = 'PieChart';
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4,
width: 600,
height: 400
};
// Handling the selection event
handleChartSelection(event) {
const selection = event.selection;
if (selection.length > 0) {
const selectedItem = selection[0];
const selectedTask = this.chartData[selectedItem.row + 1][0]; // Get the task name
alert('You selected: ' + selectedTask);
}
}
}
HTML:
<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions"
(select)="handleChartSelection($event)">
</google-chart>
এখানে, handleChartSelection ফাংশনটি ব্যবহারকারী যখন চার্টের কোনও অংশ নির্বাচন করবেন তখন ওই অংশের তথ্য দেখাবে।
Interactivity এবং Events ব্যবহার করে Google Charts অ্যাপে আপনি ব্যবহারকারীর সাথে আরও সক্রিয় যোগাযোগ করতে পারেন। বিভিন্ন ইভেন্ট যেমন click, hover, select ইত্যাদি ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে তথ্য প্রদর্শন বা অ্যাকশন ট্রিগার করতে সহায়তা করে। Angular এর মাধ্যমে Google Charts এর event handling অত্যন্ত সহজ এবং এই ইভেন্টগুলি চার
্টের ইউজার অভিজ্ঞতাকে আরও উন্নত করতে পারে।
Google Charts API ইন্টারঅ্যাকটিভ এবং ইউজার ফ্রেন্ডলি চার্ট তৈরিতে সহায়তা করে। এর মাধ্যমে, আপনি চার্টের বিভিন্ন উপাদানের সাথে ইউজারের ইন্টারঅ্যাকশন তৈরি করতে পারেন, যেমন হোভার, ক্লিক, জুম, ড্র্যাগ ইত্যাদি। এই ইন্টারঅ্যাকশনগুলো ইউজারের অভিজ্ঞতাকে উন্নত করে এবং ডেটা ভিজুয়ালাইজেশনকে আরও কার্যকরী করে তোলে।
Google Charts ইন্টারঅ্যাকটিভ ফিচার যেমন tooltip, click events, selection events, এবং hover effects সাপোর্ট করে, যা ব্যবহারকারীদের চার্টের সাথে সরাসরি যোগাযোগ করতে সহায়তা করে।
Tooltip চার্টের উপরে হোভার করার সময় প্রদর্শিত হয়, যা অতিরিক্ত তথ্য দেখানোর জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীর জন্য ডেটা আরও স্পষ্টভাবে উপস্থাপন করতে সহায়তা করে।
chartOptions = {
tooltip: {
trigger: 'focus', // Tooltip trigger: focus, selection
isHtml: true, // Enable HTML content in tooltip
textStyle: {
color: 'black', // Tooltip text color
fontSize: 14 // Tooltip text size
}
}
};
এখানে, trigger অপশন দ্বারা আপনি নির্ধারণ করতে পারেন কবে টুলটিপটি প্রদর্শিত হবে—যেমন হোভার বা নির্বাচন (selection)।
আপনি click event ব্যবহার করে চার্টে ক্লিক করার মাধ্যমে বিভিন্ন অ্যাকশন ট্রিগার করতে পারেন। এই ইন্টারঅ্যাকশনের মাধ্যমে ইউজারকে চার্টের ভিতরে ক্লিক করার পর কোনো নতুন তথ্য দেখানো বা কোনো অ্যাকশন শুরু করা যায়।
chartOptions = {
// Chart options
tooltip: { trigger: 'selection' }
};
// Event Listener for click event
google.visualization.events.addListener(chart, 'select', function() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var item = chartData.getValue(selectedItem.row, 0);
alert('You selected: ' + item);
}
});
এখানে, select ইভেন্ট ব্যবহার করে ইউজার যখন চার্টের একটি অংশে ক্লিক করবে, তখন একটি এলার্ট বা অন্য কোনো অ্যাকশন ট্রিগার হবে।
Selection event ব্যবহারকারীদের চার্টের অংশ নির্বাচন করার সুযোগ দেয়। এই ইভেন্টের মাধ্যমে ইউজারের নির্বাচিত ডেটা বা অংশ নিয়ে অন্যান্য অ্যাকশন করা যায়।
chartOptions = {
selectionMode: 'multiple', // Allow multiple selection
};
// Selection event listener
google.visualization.events.addListener(chart, 'select', function() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var item = chartData.getValue(selectedItem.row, 0);
console.log('Selected item: ' + item);
}
});
এখানে, getSelection() ফাংশনের মাধ্যমে ইউজার যে অংশে ক্লিক করেছে বা নির্বাচিত করেছে তার তথ্য পাওয়া যাবে।
Hover effect দ্বারা ইউজার যখন চার্টের কোনো অংশে হোভার করবে, তখন সেই অংশের উপর কিছু অতিরিক্ত তথ্য দেখানো যাবে, যেমন রঙ পরিবর্তন বা ডেটার বিস্তারিত বিবরণ।
chartOptions = {
tooltip: {
trigger: 'focus', // Show tooltip on hover
isHtml: true, // Enable HTML content
textStyle: {
color: 'black', // Tooltip text color
fontSize: 14 // Tooltip font size
}
}
};
এই কাস্টমাইজেশনের মাধ্যমে আপনি হোভার করার সময় চার্টের বিভিন্ন অংশে টুলটিপ বা অতিরিক্ত তথ্য দেখাতে পারবেন।
Google Charts API কিছু চার্টে zoom এবং pan ফিচারও সাপোর্ট করে, বিশেষ করে Timeline Chart এবং Scatter Chart এ। এটি ব্যবহারকারীদের চার্টে ইনপুট বা ডেটা সেটের মধ্যে নেভিগেট করতে সহায়তা করে।
chartOptions = {
explorer: { actions: ['dragToZoom', 'rightClickToReset'], axis: 'horizontal', keepInBounds: true }
};
এখানে, explorer অপশন ব্যবহার করে আপনি জুম এবং প্যানিং ফিচার সক্ষম করতে পারেন, যা ব্যবহারকারীদের ডেটার মধ্যে গভীরভাবে অনুসন্ধান করতে সাহায্য করবে।
চার্টের প্রদর্শন এবং পরিবর্তনগুলোকে আরো আকর্ষণীয় করতে animation ব্যবহার করা যায়। এটি চার্টের লোডিং, ডেটা আপডেট, বা টাইটেল পরিবর্তন করার সময় এনিমেশন ইফেক্ট যোগ করতে পারে।
chartOptions = {
animation: {
startup: true, // Animation starts when the chart is loaded
easing: 'inAndOut', // Easing function for animation
duration: 1000 // Animation duration in milliseconds
}
};
এখানে, startup: true ব্যবহার করলে চার্ট লোড হওয়ার সময় এনিমেশন শুরু হবে।
এখানে একটি পূর্ণাঙ্গ উদাহরণ দেওয়া হলো যেখানে একটি Bar Chart ব্যবহার করা হয়েছে এবং এতে click event, selection event, এবং tooltip সহ আরও কিছু ইন্টারঅ্যাকটিভ ফিচার যুক্ত করা হয়েছে।
app.component.ts ফাইল:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Interactive Google Chart';
chartType = 'BarChart'; // Chart Type
chartData = [
['Year', 'Sales', 'Expenses'],
['2010', 1000, 400],
['2011', 1170, 460],
['2012', 660, 1120],
['2013', 1030, 540]
]; // Chart Data
chartOptions = {
title: 'Company Performance',
hAxis: { title: 'Year' },
vAxis: { title: 'Amount' },
animation: {
startup: true,
easing: 'inAndOut',
duration: 1000
},
tooltip: {
trigger: 'focus', // Show tooltip on hover
isHtml: true
}
};
ngOnInit() {
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(this.drawChart.bind(this));
}
drawChart() {
const data = google.visualization.arrayToDataTable(this.chartData);
const chart = new google.visualization.BarChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', () => {
const selection = chart.getSelection();
if (selection.length > 0) {
const item = selection[0];
alert('You selected: ' + this.chartData[item.row + 1][0]);
}
});
chart.draw(data, this.chartOptions);
}
}
app.component.html ফাইল:<h1>{{ title }}</h1>
<!-- Google Chart Component -->
<div id="chart_div" style="width: 900px; height: 500px;"></div>
এখানে, click event এবং tooltip ব্যবহার করা হয়েছে। ইউজার যখন চার্টের একটি অংশে ক্লিক করবে, তখন একটি এলার্ট প্রদর্শিত হবে।
Chart Interactivity এবং User Interaction ব্যবহার করে Google Charts এর মাধ্যমে আপনি ইউজারদের জন্য আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে পারেন। Tooltip, Click events, Selection events, Zoom, Animation, এবং Hover effects ব্যবহার করে আপনি ইউজারের সাথে চার্টের যোগাযোগকে আরও কার্যকরী এবং ইন্টারঅ্যাকটিভ করে তুলতে পারেন। এগুলি ডেটা ভিজুয়ালাইজেশনকে আরও গতিশীল এবং ব্যবহারকারী-বান্ধব করে তোলে।
Google Charts API তে Click Event এবং Data Selection Event ব্যবহারের মাধ্যমে আপনি চার্টের উপর ক্লিক করলে বা কোন ডেটা নির্বাচন করলে কিছু অ্যাকশন ট্রিগার করতে পারেন। এই ইভেন্টগুলোর মাধ্যমে আপনি ইউজার ইন্টারঅ্যাকশনকে আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিক করতে পারেন।
নিচে Chart Click Event এবং Data Selection Event এর ব্যবহার দেখানো হলো:
Chart Click Event ব্যবহার করে আপনি যখন চার্টের কোনো একটি পয়েন্টে ক্লিক করবেন, তখন তার সাথে সম্পর্কিত ডেটা বা একটি নির্দিষ্ট কার্যকলাপ ট্রিগার করতে পারবেন।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Charts - Click Event Example';
chartType = 'PieChart'; // Chart Type: PieChart
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Initial Data
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400
};
// Chart Click Event Handler
onChartClick(event) {
const selectedItem = event;
if (selectedItem) {
const itemIndex = selectedItem.row;
alert(`You clicked on: ${this.chartData[itemIndex][0]} - ${this.chartData[itemIndex][1]} hours`);
}
}
}
app.component.html):<h1>{{ title }}</h1>
<!-- Google Chart with Click Event -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions"
(chartClick)="onChartClick($event)">
</google-chart>
এখানে কী ঘটছে:
event পারামিটারটি চার্টের ক্লিক করা পয়েন্টের তথ্য সরবরাহ করবে।itemIndex দিয়ে ক্লিক করা পয়েন্টের ডেটা পাওয়া যাবে, এবং সেই ডেটার সাথে একটি alert বার্তা প্রদর্শিত হবে।Data Selection Event ব্যবহার করে আপনি যখন ইউজার কোনো চার্টের ডেটা নির্বাচন করবেন (যেমন একটি পয়েন্ট বা সেগমেন্ট), তখন ওই ডেটার উপর ভিত্তি করে একটি অ্যাকশন ট্রিগার করতে পারেন।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Charts - Data Selection Example';
chartType = 'PieChart'; // Chart Type: PieChart
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Initial Data
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400
};
// Data Selection Event Handler
onDataSelection(event) {
const selectedItem = event.selection;
if (selectedItem.length > 0) {
const itemIndex = selectedItem[0].row;
alert(`You selected: ${this.chartData[itemIndex][0]} - ${this.chartData[itemIndex][1]} hours`);
}
}
}
app.component.html):<h1>{{ title }}</h1>
<!-- Google Chart with Data Selection Event -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions"
(chartSelection)="onDataSelection($event)">
</google-chart>
এখানে কী ঘটছে:
event.selection দ্বারা ইউজারের নির্বাচিত ডেটা পাওয়া যাবে।itemIndex দিয়ে সিলেক্ট করা সেগমেন্ট বা পয়েন্টের ডেটা বের করা হবে, এবং সেই ডেটার সাথে একটি alert বার্তা প্রদর্শিত হবে।| Feature | Chart Click Event | Data Selection Event |
|---|---|---|
| Trigger | ইউজার যখন চার্টের একটি পয়েন্টে ক্লিক করেন। | ইউজার যখন চার্টের একটি পয়েন্ট বা সেগমেন্ট নির্বাচন করেন। |
| Event Data | শুধুমাত্র ক্লিক করা পয়েন্টের ডেটা পাওয়া যায়। | নির্বাচিত সেগমেন্ট বা পয়েন্টের ডেটা পাওয়া যায়। |
| Use Case | ক্লিক করে ডেটা বা তথ্য দেখতে চাইলে ব্যবহার। | সিলেক্ট করা ডেটার সাথে কাজ বা বিশ্লেষণ করার জন্য ব্যবহার। |
Chart Click Event এবং Data Selection Event ব্যবহার করে আপনি Google Charts-এ ইউজারের ইন্টারঅ্যাকশনকে আরো ইন্টারঅ্যাকটিভ করতে পারেন। যখন ইউজার চার্টে কোন পয়েন্টে ক্লিক করবেন বা নির্বাচন করবেন, তখন আপনি সেই তথ্য অনুযায়ী কিছু কার্যকলাপ চালাতে পারবেন। এগুলি ডেটা ভিজুয়ালাইজেশন অ্যাপ্লিকেশনগুলোতে ইউজারের কাছে আরও তথ্যপূর্ণ এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করতে সহায়তা করে।
Mouse Hover এবং Tooltip হল ওয়েব ডেভেলপমেন্টে দুটি অত্যন্ত গুরুত্বপূর্ণ ইউজার ইন্টারঅ্যাকশন যা ওয়েব পেজের ইউজার অভিজ্ঞতা (UX) উন্নত করতে ব্যবহৃত হয়। Mouse Hover এর মাধ্যমে ইউজার যখন মাউসের কার্সর একটি নির্দিষ্ট এলিমেন্টের উপর রাখে, তখন কিছু ইন্টারঅ্যাকশন ঘটে। Tooltip হল একটি ছোট তথ্য প্রদর্শন যা সাধারণত একটি এলিমেন্টের উপর মাউস হোভার করার সময় দৃশ্যমান হয়।
Angular-এ এই ধরনের ইভেন্ট হ্যান্ডলিং সহজে করা যায়। এখানে আমরা Mouse Hover এবং Tooltip Event Handling নিয়ে কাজ করার জন্য দুটি প্রধান বিষয় নিয়ে আলোচনা করব।
Angular-এ mouse hover ইভেন্টটি হ্যান্ডল করার জন্য আপনি (mouseenter) এবং (mouseleave) ইভেন্ট ব্যবহার করতে পারেন।
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Mouse Hover Example';
hoverMessage: string = 'Mouse not hovering';
onMouseEnter() {
this.hoverMessage = 'Mouse is hovering!';
}
onMouseLeave() {
this.hoverMessage = 'Mouse is not hovering';
}
}
app.component.html
<h1>{{ title }}</h1>
<div
(mouseenter)="onMouseEnter()"
(mouseleave)="onMouseLeave()"
style="width: 200px; height: 200px; background-color: lightblue; text-align: center; padding-top: 80px;">
Hover over this box
</div>
<p>{{ hoverMessage }}</p>
এখানে, যখন আপনি div এর উপর মাউস হোভার করবেন, তখন একটি মেসেজ দেখাবে যা পরিবর্তিত হবে।
Angular-এ টুলটিপ তৈরি করার জন্য অনেক লাইব্রেরি পাওয়া যায়, তবে এখানে আমরা একটি সিম্পল টুলটিপ ইমপ্লিমেন্ট করব যা mouse hover ইভেন্টের মাধ্যমে প্রদর্শিত হবে।
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
tooltipVisible: boolean = false;
// Mouse hover event for showing tooltip
showTooltip() {
this.tooltipVisible = true;
}
// Mouse leave event for hiding tooltip
hideTooltip() {
this.tooltipVisible = false;
}
}
app.component.html
<h1>Tooltip Example</h1>
<button
(mouseenter)="showTooltip()"
(mouseleave)="hideTooltip()"
style="position: relative; padding: 10px 20px;">
Hover over me!
</button>
<!-- Tooltip -->
<div *ngIf="tooltipVisible"
style="position: absolute; background-color: #333; color: white; padding: 5px; border-radius: 5px; top: 40px; left: 0;">
This is a Tooltip!
</div>
showTooltip() ফাংশন কল হবে এবং টুলটিপটি প্রদর্শিত হবে।hideTooltip() ফাংশন কল হবে এবং টুলটিপটি অদৃশ্য হয়ে যাবে।এখানে tooltipVisible নামে একটি ভ্যারিয়েবল ব্যবহৃত হয়েছে যা টুলটিপের দৃশ্যমানতা নিয়ন্ত্রণ করে। *ngIf ডিরেক্টিভ ব্যবহার করা হয়েছে টুলটিপটি কেবল তখনই প্রদর্শিত হবে যখন tooltipVisible ভ্যালু true হবে।
আপনি টুলটিপের স্টাইল কাস্টমাইজ করতে পারেন। যেমন: টুলটিপের ব্যাকগ্রাউন্ড, রঙ, মার্জিন, প্যাডিং, ফন্ট সাইজ, এবং টুলটিপের অবস্থান নিয়ন্ত্রণ করতে পারেন।
/* Tooltip Style */
.tooltip {
position: absolute;
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
opacity: 0.9;
}
এটি আপনার টুলটিপকে আরো আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তুলবে।
Angular Material লাইব্রেরি ব্যবহার করে Tooltip আরো উন্নত এবং ইন্টারঅ্যাকটিভ করা যেতে পারে। এখানে আমরা দেখাবো কিভাবে Angular Material এর TooltipModule ব্যবহার করে টুলটিপ তৈরি করা যায়।
ng add @angular/material
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MatTooltipModule } from '@angular/material/tooltip'; // TooltipModule ইমপোর্ট
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatTooltipModule // TooltipModule যোগ করা হয়েছে
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<button mat-raised-button matTooltip="Click to perform action" matTooltipPosition="above">
Hover over me!
</button>
এখানে, matTooltip ব্যবহার করা হয়েছে টুলটিপ দেখানোর জন্য এবং matTooltipPosition এর মাধ্যমে টুলটিপের অবস্থান নির্ধারণ করা হয়েছে (যেমন "above", "below", "left", "right")।
Google Charts API ব্যবহার করে আপনি আপনার চার্টে Custom Events যোগ করতে পারেন, যা চার্টের সাথে ইউজারের ইন্টারঅ্যাকশনকে আরও আকর্ষণীয় এবং কার্যকরী করে তোলে। আপনি যেমন, চার্টের উপরে ক্লিক, হোভার ইভেন্ট, সিলেকশন ইভেন্ট ইত্যাদি ব্যবহার করতে পারেন।
এখানে আমরা দেখব কিভাবে Custom Events যোগ করতে হয় এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে হয়।
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই একটি প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):
ng new interactive-charts
cd interactive-charts
এখন angular-google-charts লাইব্রেরি ইন্সটল করুন:
npm install angular-google-charts
এটি ইনস্টল হওয়ার পর angular-google-charts প্যাকেজটি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।
এখন, GoogleChartsModule ব্যবহার করার জন্য app.module.ts ফাইলে এটি ইমপোর্ট করুন:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন আমরা একটি Pie Chart তৈরি করব এবং তাতে Custom Event যোগ করব, যেমন ইউজার যখন চার্টের অংশে ক্লিক করবে, তখন একটি নির্দিষ্ট মেসেজ প্রদর্শিত হবে।
app.component.ts:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Interactive Google Charts';
chartType = 'PieChart'; // Chart Type
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Chart Data
chartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400
};
// Custom event function
onChartClick(event: any) {
alert(`You clicked on: ${event.chart.getSelection()[0]?.row}`);
}
// Function to handle events when chart is ready
onChartReady() {
console.log('Chart is ready to use');
}
}
এখানে, আমরা একটি Pie Chart তৈরি করেছি এবং onChartClick নামে একটি Custom Event ফাংশন তৈরি করেছি যা ইউজার যখন চার্টের কোন অংশে ক্লিক করবে, তখন একটি এলার্ট দেখাবে এবং ক্লিক করা সেগমেন্টের তথ্য প্রদর্শন করবে।
এখন, app.component.html ফাইলে আমরা google-chart কম্পোনেন্ট ব্যবহার করে চার্ট রেন্ডার করব এবং Custom Event-এর জন্য ইভেন্ট হ্যান্ডলার যোগ করব।
app.component.html:<h1>{{ title }}</h1>
<!-- Google Chart কম্পোনেন্ট -->
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions"
(chartReady)="onChartReady()"
(chartSelect)="onChartClick($event)">
</google-chart>
এখানে:
এখন Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি Pie Chart দেখতে পাবেন এবং চার্টের কোন অংশে ক্লিক করলে এলার্ট দেখাবে, যা সেগমেন্টের উপর নির্ভর করবে।
Google Charts API তে Custom Events এর মাধ্যমে আপনি আরও বিভিন্ন ধরনের ইন্টারঅ্যাকশন যোগ করতে পারেন, যেমন:
চার্টের উপর ক্লিক করার সময় সিলেক্টেড এলিমেন্টের তথ্য দেখতে চান, তখন chartSelect ইভেন্ট ব্যবহার করা হয়।
onChartClick(event: any) {
const selection = event.chart.getSelection();
if (selection.length > 0) {
const item = selection[0];
alert(`You selected: ${this.chartData[item.row][0]}`);
}
}
চার্টের উপরে মাউস হোভার করলে কোন ইনফরমেশন বা টুলটিপ প্রদর্শন করতে পারেন।
onMouseOver(event: any) {
const row = event.chart.getSelection()[0]?.row;
alert(`You hovered over: ${this.chartData[row][0]}`);
}
Custom Events এবং Interactive Charts এর মাধ্যমে আপনি Google Charts-এ ইন্টারঅ্যাকশন এবং ইউজার ইভেন্ট পরিচালনা করতে পারেন। আপনি যেমন, chartSelect (ক্লিক ইভেন্ট), chartReady (চার্ট রেডি হওয়ার ইভেন্ট) ইত্যাদি ব্যবহার করে বিভিন্ন ধরনের ইন্টারঅ্যাকশন যুক্ত করতে পারেন। এই ইভেন্টগুলি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে, যেখানে আপনি ইউজারের ইন্টারঅ্যাকশন অনুসারে চার্টে ডেটা বা ইনফরমেশন প্রদর্শন করতে পারবেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
